<template>
	<view class="price-view">
		<view class="search-view">
			<u-search :placeholder="$t('searchResult.search')" :showAction="false" @click="goSearch" :disabled="true" height="37">
			</u-search>
		</view>

		<view class="container">
			<view class="img-name" @tap="goDetils(item.id)">
				<image v-if="item.morebagPublishPictures" :src="item.morebagPublishPictures[0].picture" mode="aspectFit"></image>
				<image v-else-if="picture" :src="picture" mode="aspectFit"></image>
				<view class="name">
					{{$t("goodsReleased.language") == "zh"?item.commodity:item.commodityEn}}
				</view>
			</view>

			<view class="price">
				<view class="col-date wid-sty1">
					<view class="title">
						{{$t("lookPrice.date")}}
					</view>
					<view class="content">
						<text v-for="item in dateList" :key="item.id">
              {{ dayjs(item.bidTime.split(' ')[0]).format('DD-MM-YYYY') }}
            </text>
					</view>
				</view>
				<view class="col-time wid-sty">
					<view class="title">
						{{$t("lookPrice.time")}}
					</view>
					<view class="content">
						<text v-for="item in dateList" :key="item.id">
              {{ item.bidTime.split(" ")[1].split(":").slice(0, 2).join(":") }}
            </text>
					</view>
				</view>
				<view class="col-price wid-sty">
					<view class="title">
						{{$t("lookPrice.price")}}
					</view>
					<view class="content c-price">
						<text :class="{self: item.userId == userId}" v-for="item in dateList" :key="item.id">
              {{ '$' + String(item.bid).replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}
            </text>
					</view>
				</view>

				<view class="col-price wid-sty">
					<view class="title bor-none">
						{{$t("lookPrice.hint")}}
					</view>
					<view class="bor-none content c-price self">
						<text v-for="item in dateList" :key="item.id">{{item.userId == userId?$t("lookPrice.youOffer"):""}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="go-bid" @tap="goBid" v-if="item.customerId != userId">
			{{$t('lookPrice.goBid')}}
		</view>
	</view>
</template>

<script>
	import { getBid, getCommDetail, getCommCateDetail } from "@/common/api.js"
  import dayjs from 'dayjs'

	export default {
		data() {
			return {
        dayjs,
        item: "",
				dateList: "",
				isPrice: null,
				picture: null,
				userId: null,
				series: null,
				filterBrand: null,
				condition: null,
				addr: null
			}
		},
		methods: {
      // 跳转详情
      goDetils(id) {
        uni.navigateTo({
          url: `/pages/commodityDetails/commodityDetails?id=${id}`
        })
      },
			goBid() {
				if(!this.addr) {
					return
				}

				uni.redirectTo({
					url: `/pages/bidBuy/bidBuy?current=${0}&id=${this.item.id}&item=${encodeURIComponent(JSON.stringify(this.item))}&series=${encodeURIComponent(JSON.stringify(this.series))}&filterBrand=${encodeURIComponent(JSON.stringify(this.filterBrand))}&addr=${encodeURIComponent(JSON.stringify(this.addr))}&condition=${encodeURIComponent(JSON.stringify(this.condition))}`
				})
			},
			goSearch() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			},
			async initBidData() {
				if(this.item) {
					console.log(this.item,"1111111")
					const res = await getBid({commodityId: this.item.id});
					if(res.code==200) {
						res.rows.sort((a, b) => {
							return b.bid - a.bid;
						});
						this.dateList = res.rows;
					}

					const res2 = await getCommCateDetail(this.item.id);
					console.log(res2);
					let index = null;
					for (let i = 0; i < res2.data.length; i++) {
						if (res2.data[i].parentName === "系列" || res2.data[i].parentEndName === "series") {
							index = i;
							break;
						}
					}
					if (index) {
						this.series = res2.data.splice(index, 1);
					}
					this.item["category"] = res2.data.filter(item => item.parentName != "品牌" && item.parentName !=
						"成色" && item.parentName != "所在地");
					this.filterBrand = res2.data.filter(item => item.parentName == "品牌");
					this.condition = res2.data.filter(item => item.parentName == "成色");
					this.addr = res2.data.filter(item => item.parentName == "所在地");

					// #ifdef APP
					console.log(this.isPrice, this.dateList);
					if(this.isPrice && this.dateList.length > 1) {
						uniCloud.callFunction({
							name:"push",
							data:{
							  cids:this.dateList[1].cid,
							  title: this.$t('lookPrice.noticeTitle'),
							  content: this.$t('lookPrice.noticeContent')
							},
							success: (res) => {
								console.log(res);
							},
							fail: (f) => {
								console.log(f);
							}
						  })
					}
					// #endif
					return
				}
				const resComm = await getCommDetail(this.id);

				// console.log(res, resComm);
				this.item = resComm.data;
				if(resComm.code == 200) {
					const res = await getBid({commodityId: this.item.id});
					if(res.code==200) {
						res.rows.sort((a, b) => {
							return b.bid - a.bid;
						});
						this.dateList = res.rows;
					}
				}

				const res2 = await getCommCateDetail(this.id);
				let index = null;
				for (let i = 0; i < res2.data.length; i++) {
					if (res2.data[i].parentName === "系列" || res2.data[i].parentEndName === "series") {
						index = i;
						break;
					}
				}
				if (index) {
					this.series = res2.data.splice(index, 1);
				}
				this.item["category"] = res2.data.filter(item => item.parentName != "品牌" && item.parentName !=
					"成色" && item.parentName != "所在地");
				this.filterBrand = res2.data.filter(item => item.parentName == "品牌");
				this.condition = res2.data.filter(item => item.parentName == "成色");
				this.addr = res2.data.filter(item => item.parentName == "所在地");

				// #ifdef APP
				console.log(this.isPrice, this.dateList);
				if(this.isPrice && this.dateList.length > 1) {
					uniCloud.callFunction({
						name:"push",
						data:{
						  cids:this.dateList[1].cid,
						  title: this.$t('lookPrice.noticeTitle'),
						  content: this.$t('lookPrice.noticeContent')
						},
						success: (res) => {
							console.log(res);
						},
						fail: (f) => {
							console.log(f);
						}
					  })
				}
				// #endif
				console.log(this.dateList);
			}
		},
		onReady() {
			uni.setNavigationBarTitle({ title: this.$t("lookPrice.title")});
		},
		onLoad(option) {
			this.userId = uni.getStorageSync("userId")
			// console.log(this.userId,"this.userId")
			if(option.item) {
				this.item = JSON.parse(decodeURIComponent(option.item));
			}
			this.isPrice = option.isPrice;
			if(option.picture) {
				this.picture = JSON.parse(decodeURIComponent(option.picture));
			}
			this.id = option.id;
			this.initBidData();
			console.log(this.item, this.picture);
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}
</style>
<style lang="scss" scoped>
	text {
		display: block;
		height: 65rpx;
	}

	.search-view {
		padding: 14rpx 22rpx;
		background-color: #fff;
	}

	.container {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.go-bid {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 88rpx;
		background-color: #000000;
		border-radius: 20rpx 20rpx 0 0;
		color: #fff;
		text-align: center;
		line-height: 88rpx;
		font-weight: bold;
	}

	.img-name {
		height: 540rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		box-shadow: 0rpx 2rpx 16rpx 0rpx #0000000C;

		image {
			height: 400rpx;
			width: 100%;
		}

		.name {
			color: #000000;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			// width: 500rpx;
			text-align: left;
			margin-left: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 140rpx;
		}
	}

	.price {
		height: 686rpx;
		background-color: #FBFBFB;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		display: flex;
		// align-items: center;
		box-shadow: 0rpx 2rpx 16rpx 0rpx #0000000C;

		.wid-sty {
			height: 586rpx;
			width: 23%;
			text-align: center;
			line-height: 100rpx;
		}
    .wid-sty1 {
      height: 586rpx;
      width: 31%;
      text-align: center;
      line-height: 100rpx;
    }

		.title {
			border-right: 2rpx solid #E8E8E8;
			border-bottom: 2rpx solid #E8E8E8;
		}

		.bor-none {
			border-right: none !important;
		}

		.content {
			height: 100%;
			border-right: 2rpx solid #E8E8E8;
			color: #000000;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
		}

		.c-price {

			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
		}
	}

	.self {
		color: #FF0000 !important;
	}
</style>
